<template>
    <view class="content">
        <swiper class="swiper" circular>
            <swiper-item>
                <image :src="viewspotInfo.img" class="swiper-picture"></image>
            </swiper-item>
        </swiper>

        <view class="name-box-outer">
            <view class="name-box">
                <view class="name">{{ viewspotInfo.name }}</view>
                <view class="tag-box" v-if="viewspotInfo.topics">
                    <uni-tag
                        class="tag"
                        v-for="item in viewspotInfo.topics.split(',')"
                        :key="item"
                        size="small"
                        type="error"
                        :circle="true"
                        :inverted="true"
                        :text="item"
                    ></uni-tag>
                </view>
                <view class="location-box">
                    <view class="location">
                        <uni-icons type="location" size="14"></uni-icons>
                        {{ viewspotInfo.address }}
                    </view>
                    <view class="distance" v-show="viewspotInfo.distance"> 距离您({{ viewspotInfo.distance }})
                    </view>
                </view>
            </view>
        </view>

        <view class="btn-box">
            <view class="btn" @click="phoneCall(viewspotInfo.phone)">
                <uni-icons type="phone" size="14"></uni-icons>
                联系商家
            </view>

            <view class="btn" @click="openLocation">
                <uni-icons type="navigate" size="14"></uni-icons>
                位置导航
            </view>

            <view class="btn" @click="moreInfo">
                <uni-icons type="list" size="14"></uni-icons>
                更多信息
            </view>
        </view>

        <view class="detail-info-box">
            <view class="inner-box">
                <view class="title">专属权益说明</view>
                <uni-table border stripe style="min-width: 100%">
                    <uni-tr>
                        <uni-th align="center">免票次数</uni-th>
                        <uni-th align="center">签约到期时间</uni-th>
                        <uni-th align="center">入园状态</uni-th>
                    </uni-tr>
                    <uni-tr>
                        <uni-td align="center">
                            <text style="color: red">{{ viewspotInfo.num }}次</text>
                        </uni-td>
                        <uni-td align="center">{{ viewspotInfo.endTime }}</uni-td>
                        <uni-td align="center">
                            <text style="color: #4cd964" v-if="viewspotInfo.state == 1">开园</text>
                            <text style="color: #999" v-else>已闭园</text>
                        </uni-td>
                    </uni-tr>
                </uni-table>

                <view class="other-info-box">
                    <view class="other-info-box-item">
                        <view class="label">
                            <uni-icons type="spinner-cycle" size="14"></uni-icons>
                            窗口票价
                        </view>
                        <text class="desc" style="text-decoration-line: line-through;"> {{ viewspotInfo.price }}
                            元/次/人
                        </text>
                    </view>

                    <view class="other-info-box-item">
                        <view class="label">
                            <uni-icons type="shop" size="14"></uni-icons>
                            营业时间
                        </view>
                        <text class="desc">{{ viewspotInfo.storeBeginTime }} - {{ viewspotInfo.storeEndTime }}</text>
                    </view>

                    <view class="other-info-box-item">
                        <view class="label">
                            <uni-icons type="phone" size="14"></uni-icons>
                            商家电话
                        </view>
                        <text class="desc">{{ viewspotInfo.phone }}</text>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            viewspotInfo: {},
            id: null,
            lat: '',
            lng: '',
        }
    },
    onLoad(option) {
        if (!option.id) {
            uni.showToast({
                title: '参数错误',
                icon: 'none',
                duration: 1500
            })
            setTimeout(function () {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            }, 1500)
            return false
        }

        this.id = option.id

        // 当前定位
        const user_current_point = uni.getStorageSync('user_current_point')
        if (user_current_point) {
            this.lng = user_current_point.lng
            this.lat = user_current_point.lat
            this.getDataInfo()
        } else {
            this.getCurrentLocation()
        }
    },
    onPullDownRefresh() {
        this.getCurrentLocation();
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    onShareAppMessage() {
        return {
            title: this.viewspotInfo.name + ' '  + this.viewspotInfo.address,
            path: '/pages/detail/detail?id=' + this.viewspotInfo.id,
            imageUrl: this.viewspotInfo.img,
        }
    },
    onShareTimeline() {
        return {
            title: this.viewspotInfo.name + ' '  + this.viewspotInfo.address,
            path: '/pages/detail/detail?id=' + this.viewspotInfo.id,
            imageUrl: this.viewspotInfo.img,
        }
    },
    methods: {
        async getDataInfo() {
            const viewspot = uniCloud.importObject('viewspot')
            const res = await viewspot.getViewSpotInfo(this.id, this.lng, this.lat)
            this.viewspotInfo = res.data
        },
        getCurrentLocation() {
            let that = this
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    that.lng = res.longitude;
                    that.lat = res.latitude;
                },
                fail: function (res) {
                    console.log(res);
                },
                complete: function (res) {
                    that.getDataInfo();
                }
            });
        },
        phoneCall(phone) {
            if (phone) {
                uni.makePhoneCall({
                    phoneNumber: phone
                });
            } else {
                uni.showToast({
                    title: '号码不存在',
                    icon: 'none',
                    duration: 2000
                });
            }
        },
        openLocation() {
            uni.openLocation({
                name: this.viewspotInfo.name,
                address: this.viewspotInfo.address,
                latitude: Number(this.viewspotInfo.lat),
                longitude: Number(this.viewspotInfo.lng),
                scale: 18
            });
        },
        moreInfo() {
            uni.navigateToMiniProgram({
                appId: 'wx09edd1d67de584eb',
                path: "ycSaaS/__plugin__/wxd018af543c2fc6f7/viewsA/lovejx/town/featureDetail?id=" + this.viewspotInfo.storeNo,
            })
        },
    }
}
</script>

<style lang="scss">
.swiper {
    height: 600rpx;

    .swiper-picture {
        width: 100%;
        height: 100%;
    }
}

.name-box-outer {
    position: relative;
    height: 200rpx;

    .name-box {
        padding: 20rpx;
        border-radius: 20rpx 20rpx 0 0;
        background-color: #fff;
        position: absolute;
        top: -40rpx;
        left: 0;
        right: 0;

        .name {
            font-size: 22px;
            font-weight: bolder;
            color: #3b4144;
            margin-top: 20rpx;
        }

        .tag-box {
            margin-top: 20rpx;

            .tag {
                margin-right: 20rpx;
            }
        }

        .location-box {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .location {
                display: flex;
                align-items: center;
                font-size: $uni-font-size-sm;
                color: $uni-text-color-placeholder;
                width: 70%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .distance {
                font-size: $uni-font-size-sm;
                color: $uni-text-color-grey;
            }
        }
    }
}

.btn-box {
    background-color: $uni-bg-color-grey;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
        background-color: $uni-bg-color;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        width: 30%;
        border-radius: 10rpx;
        font-size: $uni-font-size-base;
        color: $uni-text-color-placeholder;
    }
}

.detail-info-box {
    background-color: $uni-bg-color;
    padding: 20rpx;

    .inner-box {
        padding: 20rpx;
        background-color: #fdf5f5;
        opacity: 0.8;
        border-radius: 20rpx;
    }

    .title {
        text-align: center;
        font-weight: bolder;
        font-size: 46rpx;
        margin: 10rpx 0;
    }

    .other-info-box {
        margin-top: 20rpx;
        font-size: $uni-font-size-sm;

        .other-info-box-item {
            display: flex;
            align-items: center;

            .label {
                color: black;
                width: 200rpx;
                margin: 10rpx 0;
            }

            .desc {
                color: $uni-text-color-placeholder;
            }
        }
    }
}
</style>
